<template>
	<view class="u-p-30">
		<view class="u-m-b-20 black u-font-34">请输入您本人的银行卡信息</view>
		<view class="bg-white radius20 u-p-l-30 u-p-r-30">
			<u-form :model="bankForm" ref="uForm" :rules="rules" :error-type="['toast']" label-width="120">
				<u-form-item label="卡号" prop="bank_code">
					<u-input v-model="bankForm.bank_code" placeholder="请输入银行卡卡号" :clearable="false" />
				</u-form-item>
				<u-form-item label="开户行" prop="bank_name">
					<u-input v-model="typeName" placeholder="银行卡开户行" :clearable="false" disabled />
				</u-form-item>
				<u-form-item label="手机号" prop="phone">
					<u-input v-model="bankForm.phone" placeholder="请输入银行卡预留手机号" :clearable="false" />
				</u-form-item>
				<u-form-item label="验证码" prop="captcha">
					<u-input v-model="bankForm.captcha" placeholder="请输入验证码" :clearable="false" />
					<u-button slot="right" type="success" size="mini" shape="circle" plain @click="getCode" hover-class="none"
						:custom-style="{backgroundColor:'#ffffff !important'}">{{codeTips}}</u-button>
				</u-form-item>
			</u-form>
		</view>
		<view style="margin-top: 80rpx;">
			<u-button type="primary" shape="circle" hover-class="none" :loading="loading"
				@click="addCardHandle">添加银行卡</u-button>
		</view>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeName: '',
				bankForm: {
					bank_code: '',
					bank_name: '',
					type: 'bank',
					phone: '',
					captcha: ''
				},
				rules: {
					bank_code: [{
							required: true,
							message: '请输入银行卡卡号',
							trigger: ['blur'],
						},
						{
							asyncValidator: (rule, value, callback) => {
								this.$u.api.bankPlace({
									bank_code: value
								}).then(res => {
									this.bankForm.bank_name = res.bank_name;
									this.typeName = `${res.bank_name} ${res.bank_type}`
									callback()
								}).catch(err => {
									callback(new Error(err.msg))
								})
							},
							trigger: ['blur'],
						}
					],
					bank_name: [{
						required: true,
						message: '请输入银行卡开户行名称'
					}],
					phone: [{
							required: true,
							message: '请输入手机号'
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '请输入正确的手机号'
						}
					],
					captcha: [{
						required: true,
						message: '请输入验证码'
					}]
				},
				codeTips: '',
				loading: false
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {

		},
		methods: {
			codeChange(text) {
				this.codeTips = text;
			},
			getCode() {
				this.$refs.uForm.validateField('phone', (valid) => {
					if (valid) {
						if (this.$refs.uCode.canGetCode) {
							uni.showLoading({
								title: '正在获取验证码',
								mask: true
							})
							this.$u.api.getVerifyCode({
								phone: this.bankForm.phone
							}).then(res => {
								uni.hideLoading();
								this.$u.toast('验证码已发送');
								this.$refs.uCode.start();
							})
						} else {
							this.$u.toast('倒计时结束后再发送');
						}
					} else {
						// this.$u.toast('手机号验证不通过');
					}
				});
			},
			addCardHandle() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.loading = true
						this.$u.api.addBankCard(this.bankForm).then(res => {
							this.$u.toast("添加成功")
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}).finally(() => {
							this.loading = false
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
</style>